@(implicit lang: Lang)

@main("The Cult Cinema Inc. Movie"){

	<section style="padding-top:60px">
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
							<li><a href="@routes.Application.index(lang.code)">@Messages("home")(lang)</a> <span class="divider">/</span></li>
		        			<li class="active">@Messages("staff.statistics")(lang)</li>
		        		</ul>
					</div>
				</div>
				<div class="row">

					<div class="span12">

							<div class="row">
								<div class="span12 well">
									<h3>@Messages("staff.statistics")(lang)</h3>
									
									<table class="table">
										<thead>
											<tr>
												<th style="text-align:center">@Messages("staff.statistics.salesByMonth")(lang)</th>
												<th style="text-align:center">@Messages("staff.statistics.salesByHouse")(lang)</th>												
											</tr>
										</thead>
										<tbody>
											<tr>
												<td style="text-align:center"><canvas id="monthlySaleChart" width="450" height="400"></canvas></td>
												<td style="text-align:center"><canvas id="houseSaleChart" width="350" height="400"></canvas></td>
											</tr>
										</tbody>
									</table>
									
									
									
									
								</div>
							</div>
						</div>

				</div>
				
  	</section>
	
	<script>
	
		$.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        } });
		
		
		$.get("@routes.Staff.getStats()", function(dataSet) {
			
			var data = {
				labels : ["March","April","May","July","August"],
				datasets : [
					{
						fillColor : "rgba(220,220,220,0)",
						strokeColor : "rgba(220,220,220,1)",
						pointColor : "rgba(220,220,220,1)",
						pointStrokeColor : "#fff",
						data : dataSet.monthlyStats
					}					
				]
			}
			
			var ctx = document.getElementById("monthlySaleChart").getContext("2d");
			var monthlySaleChart = new Chart(ctx).Line(data, {bezierCurve:false, scaleLineColor : "rgba(255,255,255,.8)", scaleGridLineColor : "rgba(255,255,255,.2)"});	
			
			var data2 = {
				labels : ["@Messages("staff.house")(lang) 1","@Messages("staff.house")(lang) 2","@Messages("staff.house")(lang) 3","@Messages("staff.house")(lang) 4"],
				datasets : [
					{
						fillColor : "rgba(220,220,220,0.5)",
						strokeColor : "rgba(220,220,220,1)",
						pointColor : "rgba(220,220,220,1)",
						pointStrokeColor : "#fff",
						data : dataSet.houseStats
					}					
				]
			}
			
			var ctx = document.getElementById("houseSaleChart").getContext("2d");
			var houseSaleChart = new Chart(ctx).Bar(data2, {scaleLineColor : "rgba(255,255,255,.8)", scaleGridLineColor : "rgba(255,255,255,.2)"});
			
			
			
			
		
		});
		
		$.unblockUI();
	</script>

}(lang)
